<template>
  <div class="my-container">
    <iframe src="https://www.baidu.com/"></iframe>
    <!-- <VForm :fields="fields" @getFormValidate="getFormValidate" :value="value" />
    <VCascader :options="options" v-model="firstValue" /> -->
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import type { FormFields } from '@/components'
const value = ref({})

const fields: FormFields[] = [
  {
    el: 'VSlider',
    key: 'age',
    name: 'VSlider',
    label: '年龄'
  },
  {
    el: 'VRadio',
    key: 'sex',
    name: 'VRadio',
    label: '性别',
    attrs: {
      options: [
        { value: 1, label: '男' },
        { value: 2, label: '女' }
      ]
    },
    rules: [{ required: true, message: '请选择性别' }]
  },
  {
    el: 'VInput',
    key: 'username',
    label: '用户名',
    name: 'VInput',
    attrs: {
      placeholder: '请输入用户名'
    },
    rules: [{ required: true, message: '请输入用户名' }],
    useField: true
  },
  {
    el: 'VCheckBox',
    key: 'hboddy',
    name: 'VCheckBox',
    label: '爱好',
    attrs: {
      options: [
        { value: 1, label: '语文' },
        { value: 2, label: '数学' },
        { value: 3, label: '打游戏' }
      ]
    },
    rules: [{ required: true, message: '请选择爱好' }]
  },
  {
    el: 'VCalendar',
    key: 'time',
    name: 'VCalendar',
    label: '入职时间',
    attrs: {
      type: 'range'
    }
  }
]
const options = [
  {
    text: '浙江省',
    value: '330000',
    children: [{ text: '杭州市', value: 330100 }]
  },
  {
    text: '江苏省',
    value: '320000',
    children: [{ text: '南京市', value: 320100 }]
  }
]

const firstValue = ref(330100)

const getFormValidate = (model: any) => {
  console.log(model, '---')
}
</script>

<style></style>

<style scoped lang="scss">
.my-container {
  height: 100vh;
  width: 100%;
  overflow: hidden;
}
iframe {
  height: 100%;
  width: calc(100% + 20px);
}
</style>
